<template>
  <div>
    <table border="1px">
      <tr>
        <th>序号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
      <tr v-for="(goods, index) in goodslist" v-show="goods.sum">
        <td>{{ index+1 }}</td>
        <td>{{ goods.text}}</td>
        <td>{{ goods.price }}</td>
        <td>
          <button @click="goods.sum--" :disabled="goods.sum === 1">-</button>
          {{goods.sum}}
          <button @click="goods.sum++">+</button>
        </td>
        <td>
          <button @click="goods.sum = 0">删除</button>
        </td>
      </tr>
    </table>

    <div>
      总价:{{nprice()}}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        goodslist: [
          {text: 'iphone8', price: 5099, sum: 1},
          {text: 'iphone xs', price: 8699, sum: 1},
          {text: 'iphone xr', price: 6499, sum: 1}
        ]
      }
    },
    methods: {
      nprice: function () {
        let cc = 0;
        for (var a = 0, len = this.goodslist.length; a < len; a++) {
          cc += this.goodslist[a].price * this.goodslist[a].sum;
        }
        return cc
      }
    }
  }
</script>

<style>

</style>
